.order-status-step {
    position: relative;
    width: 160px;
    .step-line {
        width: 100%;
        .flex-horizontal-center;
    }
    .step-icon {
        width: 24px;
        height: 24px;
        .bd-rds-half;
        .flex-center;
        .ft-14;
    }
    &::before {
        position: absolute;
        width: 40px;
        height: 2px;
        top: 11px;
        left: -20px;
        content: '';
    }
    &:first-of-type::before {
        display: none;
    }
    &.inactive {
        .step-icon {
            border: 1px solid @ft-clr-l;
            color: @ft-clr-l;
        }
        &::before {
            background-color: @bg-97;
        }
    }
    &.current {
        .step-icon {
            border: 1px solid @green;
            color: @green
        }
        &::before {
            background-color: @bg-97;
        }
    }
    &.active {
        .step-icon {
            background-color: @green;
            color: white;
        }
        &::before {
            background-color: @green;
        }
    }
}